<script setup>
import {ref, reactive, onMounted} from 'vue'
import {ElMessage} from "element-plus";
import {saveEnterprise, updateEnterprise} from '@/api/platform/enterprise.jsx'
import {queryTree} from '@/api/platform/category.jsx'
//声明属性
const props = defineProps({
  "visible": {
    type: Boolean,
    default: false
  }
})
//声明事件
const emits = defineEmits(["close", "refresh"])
//表明引用，要求响应对象与表单属性ref的值保持一致
const ruleFormRef = ref(null)
//表单数据
const ruleForm = ref({
  name: "",
  user: "",
  mobile: "",
  address: "",
  categoryCode: "",
  categoryName: ""
})
//类别编码
const tmpcode = ref([]);
//校验对象定义 对象的属性是要校验的属性
const rules = reactive({
  name: [{
    required: true,
    message: '请输入企业名称',
    trigger: 'blur'
  }]
})

//保存
async function save() {
  if (tmpcode.value.length == 0) {
    ElMessage({
      message: "请选择类目!",
      type: "warning"
    })
    return;
  }
  //调用表单校验 异步的
  let valid = await ruleFormRef.value.validate(valid => {
  });
  if (!valid)
    return;
  let res;
  //判断当前是修改还是保存
  if (ruleForm.value.id) {
    //修改
    res = await updateEnterprise(ruleForm.value)
  } else {
    res = await saveEnterprise(ruleForm.value);
  }
  //验证通过，提交表单
  //等待接口返回数据以后再继续执行
  if (res.code == 200) {
    ElMessage({
      message: '保存成功',
      type: 'success'
    })
    //关闭窗口
    cls();
    //通知父窗口刷新数据
    emits("refresh");
  }
}
//组件显示时调用的初始化方法
function init(data){
  if (data){
    //说明是修改
    tmpcode.value=data.categoryCode;
    ruleForm.value=data;
  }else {
    ruleForm.value={
      name: "",
      user: "",
      mobile: "",
      address: "",
      categoryCode: "",
      categoryName: ""
    }
    tmpcode.value=""
  }
}
//暴露
defineExpose({init})
//类别选项
const categoryOptions = ref([]);
//配置选项
const casconfig = {value: "code", label: "name"};
const casref = ref(null);

//企业类目树
async function queryCategory() {
  let res = await queryTree();
  if (res.code == 200) {
    categoryOptions.value = res.data
  }
}

//新增赋值
function handleChange(v) {
  let len = v.length - 1;
  ruleForm.value.categoryCode = v[len];
  let tmp = casref.value.getCheckedNodes();
  ruleForm.value.categoryName = tmp[0].label;
}

//关闭窗口
function cls() {
  //抛出自定义事件
  emits("close");
}

//-------生命周期
onMounted(() => {
  queryCategory();
});
</script>

<template>
  <div>
    <el-dialog :model-value="visible" :close-on-click-modal="false" title="企业资料信息" width="500" @close="cls">
      <!--表单-->
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="100px"
               class="demo-ruleForm" status-icon>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="ruleForm.name" :disabled="ruleForm.id != undefined"/>
        </el-form-item>
        <el-form-item label="企业类目" prop="name">
          <el-cascader ref="casref" :props="casconfig" v-model="tmpcode" :options="categoryOptions"
                       @change="handleChange"/>
        </el-form-item>

        <el-form-item label="联系人">
          <el-input v-model="ruleForm.user"/>
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="ruleForm.mobile"/>
        </el-form-item>

        <el-form-item label="公司地址">
          <el-input v-model="ruleForm.address"/>
        </el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cls">不保存关闭</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
